<div style="display: flex;flex-direction: row;align-items: center;" (mouseenter)="!readOnly&&showEditIcon()"
    (mouseleave)="!readOnly&&hideEditIcon()">
    <div *ngIf="!editView" style="max-width: 150px; text-overflow: ellipsis; overflow: hidden;" [title]="inputValue">
        {{inputValue||''}}</div>
    <div *ngIf="editView" style="display: flex;flex-direction: row;width: 100%;">
        <input #inputField [value]="(inputValue!==undefined && inputValue!==null)?inputValue:''" style="flex: 1;">
        <mat-icon [color]="'primary'" (click)="doUpdate(inputField.value)" style="cursor: pointer;">check_circle_outline
        </mat-icon>
        <mat-icon [color]="'error'" (click)="doCancel()" style="cursor: pointer;">cancel</mat-icon>
    </div>
    <mat-icon *ngIf="!readOnly&&!editView" [ngStyle]="{'visibility':displayEdit}" [color]="'primary'" (click)="doEdit()"
        style="padding-right: 8px;cursor: pointer;">edit
    </mat-icon>
</div>